import React, { useEffect, useState } from "react";
import { Search, Tabs } from "react-vant";
import { useNavigate } from "react-router";
import http from "../../utils/http";
import HomeComp from "../../components/HomeComp/index";
const Index: React.FC = () => {
  const navigate = useNavigate();
  const [titleList, setTitleList] = useState([]);
  const onFearchTitle = async () => {
    const res = await http.get("/api/title");
    const { code, data } = res.data;
    if (code === 200) {
      setTitleList(data);
    }
  };
  useEffect(() => {
    onFearchTitle();
  }, []);
  return (
    <div>
      <Search
        placeholder="请输入搜索关键词"
        onClickInput={() => navigate("/search")}
      />
      <div className="demo-tabs">
        <Tabs>
          {titleList.length > 0 &&
            titleList.map((item: any, ind) => (
              <Tabs.TabPane key={ind} title={`${item.name}`}>
                {ind === 0 ? <HomeComp /> : `${item.name}`}
              </Tabs.TabPane>
            ))}
        </Tabs>
      </div>
    </div>
  );
};

export default Index;
